<html>
	<head>
		<meta charset="UTF-8">
		<title>合同列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="stylesheet" href="../../layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/bass.css" />
	</head>

	<body>
		<div class="body">
			<header class="layui-nav" id="headerTop"></header>
			<div class="left_muen" id="left_menu"></div>
			<div class="content_body">
				
				<!--标题栏-->
				<p class="content_title">合同管理 &nbsp;&nbsp;>&nbsp;&nbsp;合同列表</p>
				<!--标题栏-->
				
				<!--条件查询-->
				<div class="content_seach">
					<div class="layui-form">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label w50">买方</label>
								<div class="layui-input-inline">
									<input type="text" name="buyer" id="buyer" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label w50">卖方</label>
								<div class="layui-input-inline">
									<input type="text" name="seller" id="seller" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label w50">合同名称</label>
								<div class="layui-input-inline">
									<input type="text" name="contractName" id="contractName" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label w50">合同编号</label>
								<div class="layui-input-inline">
									<input type="text" name="contractCode" id="contractCode" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label w50">合同类型</label>
								<div class="layui-input-inline">
									<select name="contractType" id="contractType" lay-search="">
										<option value="">请选择</option>
										<option value="1">NG</option>
										<option value="2">其他</option>
									</select>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label w50">业务类型</label>
								<div class="layui-input-inline">
									<select name="businessType" id="businessType" lay-search="">
										<option value="">请选择</option>
										<option value="1">长期</option>
										<option value="2">短期</option>
									</select>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label w50">状态</label>
								<div class="layui-input-inline">
									<select name="contractStatus" id="contractStatus" lay-search="">
										<option value="">请选择</option>
										<option value="1">待生效</option>
										<option value="2">生效</option>
										<option value="3">作废</option>
									</select>
								</div>
							</div>
							<button class="layui-btn layui-btn-warm search layui-btn-sm" id="search" lay-submit=""  lay-filter="search"><i class="layui-icon">&#xe615;</i>查询</button>
						</div>
					</div>
					
				</div>
				<!--条件查询-->
				
				<!--表格-->
				<div class="content_table">
					<script type="text/html" id="toolbarDemo">
						<div class="layui-btn-container demoTable">
							<a href="./contractAdd.html?pos=3&childPos=0" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i> 添加</a>
							<a lay-event="shengxiao" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe642;</i> 生效</a>
							<a lay-event="zuofei"       class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe64f;</i> 作废</a>
						</div>
					</script>
					<div class="tabTable">
						<table id="table" lay-filter="tableFilter"  lay-data="{id:'idTest'}" ></table>
						<div class="layui-table-page fr">
							<div id="layui-table-page1"></div>
						</div>
					</div>
				</div>
				<!--表格-->
			</div>
			
		</div>
		<script src="../../js/common/jquery-1.11.3.min.js"></script>
		<script src="../../layui/layui.js"></script>
		<script src="../../js/common/navList.js"></script>
		<script src="../../js/common/ajax.js"></script>
		<script type="text/html" id="barContractUpdate">
			<!-- <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a> -->
			<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
		</script>
		<!--合同状态自定义模板-->
		<script type="text/html" id="contractStatusTemplet">
			{{#if (d.contractStatus == 1) { }}
			 待生效
			{{# }else if(d.contractStatus == 2){ }}
			 生效
			{{# }else if(d.contractStatus == 3){ }}
			 作废
			{{# } }}
		</script>
		<!--合同类型自定义模板-->
		<script type="text/html" id="contractTypeTemplet">
			{{#if (d.contractType == 1) { }}
			 NG
			{{# }else if(d.contractType == 2){ }}
			 其他
			{{# } }}
		</script>
		<script>
			layui.use(['table', 'laydate'], function(){
				var table = layui.table,form = layui.form,laydate = layui.laydate;

				//列表渲染
				ajaxTable({
					idNode: '#table',
					height: 400,
					url:'contract/getList',
					toolbar: '#toolbarDemo',
					dataCols:[ 
						{fixed: true,checkbox: true,height: 180,align: 'center'},
						{field: 'contractCode',title: '合同编号',align: 'center',sort: true}, 
						{field: 'contractName',title: '合同名称',align: 'center'},
						{field: '',title: '下游组织账户',align: 'center'}, 
						{field: '',title: '站点',align: 'center'}, 
						{field: 'buyer',title: '买方',align: 'center'}, 
						{field: 'seller',title: '卖方',align: 'center'}, 
						{field: 'contractStatus',title: '状态',align: 'center',templet: '#contractStatusTemplet'}, 
						{field: 'contractType',title: '合同类型',align: 'center',templet: '#contractTypeTemplet'}, 
						{field: 'contractEffectiveEndDate',title: '合同结束时间',align: 'center', sort: true}, 
						{field: 'contractDesc',title: '描述',align: 'center'},
						{field: 'right', title: '操作',toolbar:"#barContractUpdate",align: 'center'}
					]
				});
				
				//条件查询
				form.on('submit(search)', function(data){
					var buyer=$("#buyer").val(),seller=$("#seller").val(),contractName=$("#contractName").val(),contractCode=$("#contractCode").val(),
					contractType=$("#contractType option:selected").val(),businessType=$("#businessType option:selected").val(),
					contractStatus=$("#contractStatus option:selected").val();
					ajaxTable({
						idNode: '#table',
						type: "GET",
						url: "contract/getList",
						urlParme: "&buyer="+buyer+"&seller="+seller+"&contractCode="+contractCode+"&contractName="+contractName+
						     "&contractType="+contractType+"&businessType="+businessType+"&contractStatus="+contractStatus,
						dataCols:[ 
							{fixed: true,checkbox: true,height: 180,align: 'center',class:'checkbox'},
							{field: 'contractCode',title: '合同编号',align: 'center',sort: true}, 
							{field: 'contractName',title: '合同名称',align: 'center'},
							{field: '',title: '下游组织账户',align: 'center'}, 
							{field: '',title: '站点',align: 'center'}, 
							{field: 'buyer',title: '买方',align: 'center'}, 
							{field: 'seller',title: '卖方',align: 'center'}, 
							{field: 'contractStatus',title: '状态',align: 'center',templet: '#contractStatusTemplet'}, 
							{field: 'contractType',title: '合同类型',align: 'center',templet: '#contractTypeTemplet'}, 
							{field: 'contractEffectiveEndDate',title: '合同结束时间',align: 'center',sort: true}, 
							{field: 'contractDesc',title: '描述',align: 'center'},
							{field: 'right', title: '操作', toolbar:"#barContractUpdate",align: 'center'}
						],
						successFull: function (res, curr, count) {
							console.log(res)
						}
					});
				});
				
				//工具栏事件(生效、作废)
				table.on('toolbar(tableFilter)', function(obj){
				    var checkStatus = table.checkStatus(obj.config.id);
				    console.log(checkStatus);
				    switch(obj.event){
				      case 'shengxiao':
				        var data = checkStatus.data;
				        if(data.length == 0){
				        	layer.alert("只您还没有选中数据！");
				        }else if(data.length > 1){
				        	layer.alert("只能修改一条数据！");
				        }else{
				        	updateStatus(data[0].id,2);//生效
				        }
				      break;
				      case 'zuofei':
				        var data = checkStatus.data;
				        if(data.length == 0){
				        	layer.alert("只您还没有选中数据！");
				        }else if(data.length > 1){
				        	layer.alert("只能修改一条数据！");
				        }else{
				        	updateStatus(data[0].id,3);//作废
				        }
				      break;
				    };
				});
				
				//监听工具条
				table.on('tool(tableFilter)', function(obj){
					var data = obj.data;
					if(obj.event === 'detail'){
						layer.msg('ID：'+ data.id + ' 的查看操作');
					} else if(obj.event === 'del'){
						layer.confirm('确定删除吗？', function(index){
							console.log(data);
							$.ajax({
								url: baseUrl+"/contract/del",
								type: "POST",
								data:{"id":data.id},
								dataType: "json",
								success: function(data){
									if(data.code==200){
										obj.del();
										layer.close(index);
										layer.msg("删除成功", {icon: 6});
									}else{
										layer.msg("删除失败", {icon: 5});
									}
								}
							});
						});
					} else if(obj.event === 'edit'){
						layer.confirm('确定修改吗？', function(index){
							location.href="./contractEdit.html?pos=3&childPos=0&id="+data.id;
						});
					}
					
				});
				
				//修改状态（生效、作废）
				function updateStatus(id,contractStatus){
					$.ajax({
						url: baseUrl+"/contract/update",
						type: "POST",
						data:{
							"id":id,
							"contractStatus":contractStatus
						},
						dataType: "json",
						success: function(data){
							console.log(data);
							if(data.code==200){
								table.reload('table');//只刷新table
								layer.msg("修改成功", {icon: 6});
							}else{
								layer.msg("修改失败", {icon: 5});
							}
						}
					});
				}
				
				
				
				
			});
		</script>
	</body>
</html>